<template>
    <p style="line-height: 3.125rem;font-size: 1rem;font-weight: bold;" class="main_text">分区管理</p>
    <div class="main">
        <!-- ############################################## 查询 ############################################## -->
        <div class="top mb20 p20">
            <el-form :model="inquireData">
                <div class="df ">
                    <el-form-item label="仓库名称：">
                        <el-select v-model="inquireData.name" placeholder="仓库名称：" class="mr20">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="仓库编码：">
                        <el-select v-model="inquireData.name" placeholder="仓库编码：">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <el-button type="primary">查询</el-button>
            <el-button type="primary" plain>重置</el-button>
        </div>
        <!-- ############################################## 表单 ############################################## -->
        <div class="content p20">
            <div>
                <el-button type="primary" @click="RucenterDialogVisible = true">添加区域</el-button>
                <el-button type="primary" plain>批量停用</el-button>
                <el-button type="primary" plain>批量启用</el-button>
            </div>
            <el-scrollbar height="416px">
                <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%" class="mt20"
                    :header-cell-style="{ 'background': '#f0f6fe' }">
                    <el-table-column type="selection" width="50" />
                    <el-table-column label="序号" prop="id" />
                    <el-table-column label="区域名称" prop="name" />
                    <el-table-column label="区域编码" prop="bh" />
                    <el-table-column label="所属仓库名称" prop="dz" />
                    <el-table-column label="仓库编码" prop="mj" />
                    <el-table-column label="状态">
                        <template #default="props">
                            <el-button size="small" link type="primary">停用</el-button>
                            <el-button size="small" link type="warning">启用</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="props">
                            <el-button size="small" link type="primary" @click="centerDialogVisible = true">编辑</el-button>
                            <el-button size="small" link type="primary"
                                @click="StartcenterDialogVisible = true">启用</el-button>
                            <el-button size="small" link type="primary"
                                @click="StopcenterDialogVisible = true">停用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>
        <!-- ############################################## 蒙层 ############################################## -->
        <!-- ****************************** 添加分区 ****************************** -->
        <el-dialog v-model="RucenterDialogVisible" title="添加分区" width="30%" align-center>
            <el-form :model="putInData" class="df fdc aic">
                <el-form-item label="所属仓库：">
                    <el-cascader :options="options" v-model="value" :show-all-levels="false" />
                    <!-- <el-select v-model="putInData.name" placeholder="putInData">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select> -->
                </el-form-item>
                <el-form-item label="区域名称：">
                    <el-cascader :options="options" v-model="value" :show-all-levels="false" />
                    <!-- <el-select v-model="putInData.area" placeholder="putInData">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select> -->
                </el-form-item>
                <el-form-item label="区域编码：">
                    <el-cascader :options="options" v-model="value" :show-all-levels="false" />
                    <!-- <el-select v-model="putInData.racks" placeholder="putInData">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select> -->
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="RucenterDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="RucenterDialogVisible = false">
                        添加
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 编辑区域 ****************************** -->
        <el-dialog v-model="centerDialogVisible" title="编辑区域" width="30%" align-center>
            <el-form :model="putInData" class="df fdc aic">
                <el-form-item label="所属仓库：">
                    <el-cascader :options="options" v-model="value" :show-all-levels="false" />
                    <!-- <el-select v-model="putInData.name" placeholder="putInData">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select> -->
                </el-form-item>
                <el-form-item label="区域名称：">
                    <el-cascader :options="options" v-model="value" :show-all-levels="false" />
                    <!-- <el-select v-model="putInData.area" placeholder="putInData">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select> -->
                </el-form-item>
                <el-form-item label="区域编码：">
                    <el-cascader :options="options" v-model="value" :show-all-levels="false" />
                    <!-- <el-select v-model="putInData.racks" placeholder="putInData">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select> -->
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">
                        修改
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 停用区域 ****************************** -->
        <el-dialog v-model="StopcenterDialogVisible" title="停用区域" width="30%" align-center>
            <span>是否确定停用所选区域</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button>取消</el-button>
                    <el-button type="primary">确定 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- ****************************** 启用区域 ****************************** -->
        <el-dialog v-model="StartcenterDialogVisible" title="启用区域" width="30%" align-center>
            <span>是否确定启用所选区域</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button>取消</el-button>
                    <el-button type="primary">确定 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const inquireData = ref<any>({
    value1: '',
    resource: '',
    name: ''
})
const tableData = ref<any>([
    {
        id: 99,
        name: '132',
        bh: '456',
        dz: '成都市武侯区益州大道999号',
        mj: '798',
        fzr: '王五',
        dh: '17326544352',
        status: '1',
    },
])
const options = [
    {
        value: 'component',
        label: 'Component',
        children: [
            {
                value: 'basic',
                label: 'Basic',
                children: [
                    {
                        value: 'layout',
                        label: 'Layout',
                    },
                    {
                        value: 'color',
                        label: 'Color',
                    },
                    {
                        value: 'typography',
                        label: 'Typography',
                    },
                    {
                        value: 'icon',
                        label: 'Icon',
                    },
                    {
                        value: 'button',
                        label: 'Button',
                    },
                ],
            },
            {
                value: 'form',
                label: 'Form',
                children: [
                    {
                        value: 'radio',
                        label: 'Radio',
                    },
                    {
                        value: 'select',
                        label: 'Select',
                    },
                    {
                        value: 'cascader',
                        label: 'Cascader',
                    },
                    {
                        value: 'switch',
                        label: 'Switch',
                    },
                    {
                        value: 'slider',
                        label: 'Slider',
                    }
                ],
            },
            {
                value: 'data',
                label: 'Data',
                children: [
                    {
                        value: 'table',
                        label: 'Table',
                    },
                    {
                        value: 'tag',
                        label: 'Tag',
                    }
                ],
            },
            {
                value: 'notice',
                label: 'Notice',
                children: [
                    {
                        value: 'alert',
                        label: 'Alert',
                    },
                    {
                        value: 'loading',
                        label: 'Loading',
                    },
                    {
                        value: 'message',
                        label: 'Message',
                    }
                ],
            },
            {
                value: 'navigation',
                label: 'Navigation',
                children: [
                    {
                        value: 'menu',
                        label: 'Menu',
                    },
                    {
                        value: 'tabs',
                        label: 'Tabs',
                    },
                    {
                        value: 'breadcrumb',
                        label: 'Breadcrumb',
                    }
                ],
            },
            {
                value: 'others',
                label: 'Others',
                children: [
                    {
                        value: 'dialog',
                        label: 'Dialog',
                    },
                ],
            },
        ],
    },
    {
        value: 'resource',
        label: 'Resource',
        children: [
            {
                value: 'axure',
                label: 'Axure Components',
            },
            {
                value: 'sketch',
                label: 'Sketch Templates',
            },
            {
                value: 'docs',
                label: 'Design Documentation',
            },
        ],
    },
]
const value = ref()
const putInData = ref<any>({
    name: '',
    area: '',
    racks: '',
})
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
const centerDialogVisible = ref<any>(false)
const RucenterDialogVisible = ref<any>(false)
const StopcenterDialogVisible = ref<any>(false)
const StartcenterDialogVisible = ref<any>(false)


</script>

<style scoped lang="scss">
.main {
    width: 100%;

    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}
</style>
